<template>
  <div class="main">
    <vHeader title="我要买币" @return="$router.go('-1')" />
    <div class="contents">
      <img v-if="sellNone" class="sellNone" src="~@/assets/images/sellNone.png" />
      <div class="card">
        <div class="info">
          <img class="headImg" :src="baseData&&baseData.data.imgUrl + info.avatar" />
          <span>{{info.nickName}}</span>
          <img class="creditImg" v-if="info.grade" :src="require(`@/assets/images/creditType/${info.grade}.png`)" />
        </div>
        <div class="line1">
          <span class="t1">可售数量</span>
          <span class="t2" v-if="sellNone===true">0 B</span>
          <span class="t2" v-else-if="info.isSplitOrder===0 || (info.minPrice == info.transValidCount)">{{info.transValidCount}} B</span>
          <span class="t2" v-else>{{info.minPrice}} -{{info.transValidCount}} B</span>
        </div>
        <div class="line2">
          <span class="t1">收款方式</span>
          <span class="t2">
            <img :src="require(`@/assets/images/receivePayment/${info}.png`)" v-for="(info,index) in info.receivePayment" :key="index" />
          </span>
        </div>
        <div class="right">
          <div class="line1">成交量  {{info.successCount>99?'99+':info.successCount}}&nbsp;&nbsp;|&nbsp;&nbsp;{{parseInt(info.closeRate)}}%</div>
          <div class="line2">
            <span class="t1 blue">{{info.transPrice&&info.transPrice.toFixed(2)}}</span>
            <span class="t2">|&nbsp;&nbsp;单价</span>
          </div>
          <div class="line1">与我交易 {{count}}</div>
        </div>
      </div>
      <div class="card" style="padding-bottom: 0;">
        <div class="inputModel">
          <div class="title">购买数量</div>
          <div class="input">
            <input
              v-model="transCount"
              type="number"
              :disabled="info.isSplitOrder===0 || (info.isSplitOrder===0 || (info.minPrice == info.transValidCount))"
              :placeholder="`${info.minPrice}-${info.transValidCount}`"
            />
            <span @click="transCount=info.transValidCount">全部</span>
          </div>
        </div>
        <div class="line">
          <div class="left">付款方式</div>
          <div class="right2" @click="showReceivePaymentPicker=true">{{receivePaymentName || '请选择付款方式'}} {{receivePaymentName?`(${receivePaymentCard})`:''}}</div>
        </div>
        <div class="line">
          <div class="left">实付款</div>
          <div class="right3">{{receiptAmount}} CNY</div>
        </div>
      </div>
      <div class="tips">
        <div class="title">温馨提示</div>
        <div class="content">
          1.【实名付款】请使用与平台实名信息一致的账户付款；<br />
          2.【信用等级】成交单量，成交效率将影响您的信用等级，等级高的用户交易推送靠前；<br />
          3.【交易】请实时留意订单状态；<br />
          4.【售出】请务必确认收到款项再进行打币；<br />
          5.【订单完成】确认收款后，请尽快打币完成交易，订单出现异常请第一时间暂停交易井申诉；<br />
          6. 未按规定操作，平台不予承担责任。<br />
        </div>
      </div>
      <div class="button" @click="handle">立即购买</div>
    </div>
    <van-popup class="recPop" closeable v-model="showReceivePaymentPicker" round position="bottom">
      <div class="title">付款方式</div>
      <van-radio-group v-model="receivePaymentIndex">
        <van-cell-group v-for="(item,index) in payeeList" :key="index">
          <template v-if="info.receivePayment&&info.receivePayment.indexOf(item.payeeType+'')!=-1">
            <van-cell :title="`${item.payeeName}(${item.payeeCard.substr(-4)})`" clickable @click="setRec(index)">
              <template #right-icon>
                <van-radio :name="index" />
              </template>
              <template #icon>
                <img class="leftIcon" :src="require(`@/assets/images/receivePayment/${item.payeeType}.png`)" />
              </template>
            </van-cell>
          </template>
        </van-cell-group>

        <van-cell-group>
          <van-cell title="添加新的付款方式" clickable @click="goAddReceivePayment">
            <template #right-icon>
              <img class="leftIcon2" :src="require(`@/assets/images/arr5.png`)" />
            </template>
            <template #icon>
              <img class="leftIcon" :src="require(`@/assets/images/addrec.png`)" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </van-popup>

    <van-popup class="recPop" closeable v-model="agreementPicker" round position="bottom">
      <div class="title">付款方式</div>
      <div class="content">
        <div class="top">
          <img class="warn" src="~@/assets/images/warn.png" />
          <span>请认真阅读以下注意事项</span>
        </div>
        <div class="text">
          1. 恶意下单传假图平台将予<span>封号冻结资金</span>！<br />
          2. 卖家同意后，<span>15分钟内</span>完成打款并<span>提交</span>！<br />
          3. 下单后无故取消订单将<span>扣除一定信用分</span>！<br />
          4. 交易期间<span>保持手机畅通</span>并留意短信提醒！<br />
          5. 请<span>实名账户</span>打款，否则卖家有权拒绝发货！<br />
          6. <span>请确认本次购买的98币单价！</span><br />
        </div>
        <van-checkbox v-model="agreement" shape="square">
          <span class="boxText">我确认已阅读并知晓以上内容。</span>
        </van-checkbox>
        <van-button class="button btn2" :disabled="!agreement"  @click="transPay" :loading="loading">确定购买</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
  import api from "@/api/trade";
  import {
    mapState,
  } from "vuex";
  export default {
    data() {
      return {
        loading: false,
        agreementPicker: false,
        agreement: false,
        payeeList: [],
        receivePaymentIndex: '',
        receivePaymentId: '',
        receivePaymentName: '',
        receivePaymentCard: '',
        receivePaymentType: '',
        showReceivePaymentPicker: false,
        count: 0,
        transCount: 0,
        receiptAmount: 0,
        info: {},
        sellNone: false,
      }
    },
    computed: {
      ...mapState({
        baseData: state => state.global.baseData
      }),
    },
    watch:{
      transCount(val){
        this.receiptAmount = val * this.info.transPrice
      }
    },
    methods: {
      setRec(index){
        this.receivePaymentIndex = index;
        this.receivePaymentId = this.payeeList[index].id;
        this.receivePaymentName = this.payeeList[index].payeeName;
        this.receivePaymentType = this.payeeList[index].payeeType;
        this.receivePaymentCard = this.payeeList[index].payeeCard.substr(-4)
        this.showReceivePaymentPicker = false;
      },
      goAddReceivePayment(){
        this.$toast('新增付款方式')
      },
      getPayeeList(){
        let type = '';//3.银行卡 4.微信支付 5.支付宝 6.数字人民币 7.QQ支付
        api.payee({type}).then(res => {
          if(res.data.code == 0){
            this.payeeList = res.data.data;
          }
        });
      },
      getSaleCount(saleUserId){
        api.saleCount({saleUserId}).then(res => {
          if(res.data.code == 0){
            this.count = res.data.data;
          }
        });
      },
      onConfirmPrice(value, index) {
        // console.log(`当前值：${value}, 当前索引：${index}`);
        this.showPricePicker = false;
        this.transPrice = value;
      },
      onConfirmReceivePayment(value, index) {
        this.showReceivePaymentPicker = false;
        this.receivePayment = payeeList[index];
        console.log(this.receivePayment);
      },
      async getInfo(transOrderNo){
        let {data} = await api.saleInfo({transOrderNo})
        if(data.code === 0){
          data.data.receivePayment = []
          if(data.data.receivePaymentType){
            data.data.receivePaymentType.split(',').forEach(xitem=>{
              if(['3','4','5','6','7'].indexOf(xitem)!==-1){
                data.data.receivePayment.push(xitem)
              }
            })
          }
          if(data.data.isSplitOrder === 0 || (data.data.minPrice == data.data.transValidCount)){
            this.transCount = data.data.transValidCount.toFixed(2);
          }
          this.getSaleCount(data.data.userId)

          if(data.data.transValidCount === 0){
            this.sellNone = true;
          }
          this.info = data.data;
        }
      },
      handle(){
        if(!this.transCount){
          this.$toast("请输入购买数量")
          return false;
        }
        if(!this.receivePaymentId){
          this.$toast("请选择购买方式")
          return false;
        }
        if(this.transCount < this.info.minPrice){
          this.$toast("购买数量小于最小可售数量，请重新输入或全部购买")
          return false;
        }
        if(((this.info.transValidCount - this.transCount) < this.info.minPrice) && (this.info.transValidCount - this.transCount)!==0){
          this.$toast("剩余98币数量无法成单，请重新输入或全部购买")
          return false;
        }
        this.agreementPicker=true;
      },
      async transPay(){
        this.loading = true;
        let {data} = await api.transPay({
          saleId: this.info.id,
          receivePaymentId: this.receivePaymentId,
          transCount: this.transCount,
          receiptAmount: this.receiptAmount,
        })
        if(data.code === 0){
          this.$toast("购买成功")
          setTimeout(()=>{
            this.$router.push({
              name: 'buySuccess',
              query: data.data,
            })
          })
          this.loading = false;
        }else{
          this.getInfo()
          this.loading = false;
        }
      },
    },
    mounted() {
      if(this.$route.query.transOrderNo){
        this.getInfo(this.$route.query.transOrderNo)
      }
      this.getPayeeList()
    },
  }
</script>

<style lang="scss" rel="stylesheet/scss" type="text/scss" scoped>
  .main{
    height: 100%;
    .contents{
      background: #f0f5fd;
      padding: 15px;
      height: calc(100% - 84px);
      overflow: auto;
      position: relative;
    }
  }
  .sellNone{
    position: absolute;
    width: 55px;
    height: 31.5px;
    left: calc(50% - 27px);
    top: 54px;
    z-index: 1;
  }
  .recPop{
    padding-bottom: 66px;
    .title{
      line-height: 56px;
      text-align: center;
      color: #222222;
      font-size: 16px;
      border-bottom: 1px solid #EFF0F3;
    }
    .leftIcon{
      width: 18px;
      height: 18px;
      margin-right: 10px;
    }
    .leftIcon2{
      width: 7px;
      height: 11px;
    }
    /deep/.van-cell{
      align-items: center;
    }
    .content{
      padding: 20px;
      .top{
        display: flex;
        align-items: center;
        img{
          width: 36px;
          height: 26.5px;
        }
        span{
          width: 154px;
          font-size: 14px;
          color: #444444;
          line-height: 20px;
          margin-left: 10px;
        }
      }
      .text{
        padding: 15px;
        font-size: 14px;
        color: #444444;
        line-height: 20px;
        background: #FFF9F4;
        margin-bottom: 15px;
        span{
          color: #FF543A;
        }
      }
      .boxText{
        font-size: 13px;
        color: #8f949c;
        line-height: 20px;
        display: block;
      }
    }
    .btn2{
      width: 100%;
      margin-top: 30px;
    }
  }
  .card{
    padding: 15px;
    border-bottom: 1px solid #EFF0F3;
    background: #fff;
    position: relative;
    margin-bottom: 12px;
    overflow: hidden;
    .info{
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      .headImg{
        width: 20px;
        height: 20px;
        border-radius: 50%;
      }
      .creditImg{
        width: 38px;
        height: 14px;
      }
      span{
        height: 20px;
        font-size: 14px;
        font-weight: Regular;
        color: #444444;
        line-height: 20px;
        margin: 0 8px;
      }
    }
    .line1{
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      .t1{
        height: 14px;
        font-size: 10px;
        font-weight: Regular;
        color: #8f949c;
        line-height: 14px;
        margin-right: 8px;
      }
      .t2{
        height: 17px;
        font-size: 17px;
        font-weight: Medium;
        color: #444444;
        line-height: 17px;
      }
    }
    .line2{
      height: 14px;
      font-size: 10px;
      font-weight: Regular;
      .t1{
        color: #8f949c;
        margin-right: 8px;
      }
      .t2{
        color: #444444;
        img{
          width: 14px;
          height: 14px;
          margin-right: 8px;
        }
      }
    }
    .right{
      position: absolute;
      right: 15px;
      top: 18px;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      .hide{
        opacity: 0;
      }
      .line1{
        height: 14px;
        font-size: 10px;
        font-weight: Regular;
        color: #8f949c;
        line-height: 14px;
        margin-bottom: 12px;
      }
      .line2{
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        margin-top: 6px;
        .t1{
          height: 17px;
          font-size: 17px;
          font-weight: Medium;
          color: #444444;
          line-height: 17px;
          margin-right: 8px;
        }
        .blue{
          color: #479FFF;
        }
        .t2{
          height: 14px;
          font-size: 10px;
          font-weight: Regular;
          color: #8f949c;
          line-height: 14px;
        }
      }
      .flex{
        display: flex;
        align-items: center;
        .redT{
          color: red;
          font-size: 18px;
        }
        .greenT{
          color: limegreen;
          font-size: 18px;
        }
      }
      .btn{
        width: 60px;
        text-align: center;
        color: #fff;
        line-height: 27px;
        height: 27px;
        background: #479fff;
        border-radius: 4px;
        font-size: 13px;
        margin-left: 10px;
      }
      .btn2{
        width: 60px;
        text-align: center;
        color: #479fff;
        border: 1px solid #479fff;
        line-height: 27px;
        height: 27px;
        background: #fff;
        border-radius: 4px;
        font-size: 13px;
        margin-left: 10px;
      }
    }
  }
  .inputModel{
    border-bottom: 1px solid #CDCED1;
    padding-bottom: 15px;
    .title{
      height: 20px;
      font-size: 14px;
      text-align: left;
      color: #444444;
      line-height: 20px;
      margin-bottom: 12px;
    }
    .input{
      display: flex;
      align-items: center;
      justify-content: space-between;
      input{
        font-size: 28px;
        font-weight: Medium;
        text-align: left;
        // color: #caced4;
        line-height: 35.5px;
        width: 80%;
        border: none;
      }
      span{
        height: 33px;
        font-size: 14px;
        color: #479FFF;
        line-height: 33px;
      }
    }
  }
  .line{
    display: flex;
    height: 50px;
    border-bottom: 1px solid #EFF0F3;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
    .left{
      height: 20px;
      font-size: 14px;
      color: #444444;
      line-height: 20px;
    }
    .right3{
      height: 20px;
      font-size: 14px;
      color: #444444;
      line-height: 20px;
      padding-right: 15px;
    }
    .right2{
      height: 20px;
      font-size: 14px;
      color: #8F949C;
      line-height: 20px;
      padding-right: 15px;
      &::after{
        content: " ";
        width: 7px;
        height: 11px;
        background-image: url('~@/assets/images/arr5.png');
        background-size: 100% 100%;
        right: 0;
        top: 17px;
        position: absolute;
      }
    }
  }

  .tips{
    .title{
      font-size: 14px;
      color: #8f949c;
      line-height: 20px;
      margin-top: 12px;
      margin-bottom: 5px;
    }
    .content{
      font-size: 12px;
      text-align: left;
      color: #8f949c;
      line-height: 16.5px;
    }
  }
  .button{
    line-height: 44px;
    background: #479fff;
    border-radius: 4px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    margin-top: 20px;
  }
</style>
